<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>青春花语--商品收藏</title>
    <link rel="stylesheet" href="../CSS/collect.css">
    <link rel="stylesheet" href="../CSS/public.css">
    <script src="../js/collection.js"></script>
</head>
<body>
    <!-- 头部导航 -->
    <div class="top-nav">
        <ul>
            <li><a href="../index.html"><span>|</span>青春花语首页<span>|</span></a></li>
            <li><a href="../HTML/shopping_mall.html"><span>|</span>商城<span>|</span></a>
            </li>
            <li><a href="../HTML/collect.html"><span>|</span>商品收藏<span>|</span></a>
            </li>
            <li><a href="../HTML/contact.html"><span>|</span>联系客服<span>|</span></a>
            </li>
            <li><a href="../HTML/login.html"><span>|</span>欢迎登录青春花语<span>|</span></a>
            </li>
            <li><a href="../HTML/register.html"><span>|</span>免费注册<span>|</span></a>
            </li>
            <li><a href="../HTML/person.html"><span>|</span>个人资料<span>|</span></a>
            </li>
            <li><a href="../HTML/my_order.html"><span>|</span>我的订单<span>|</span></a>
            </li>
        </ul>
    </div>
    <header>  
        <h1>青春花语--我的收藏</h1>  
    </header>  
    <main> 
        <!-- article 标签用于表示独立的、完整的文章或内容块  -->
        <article class="collection-item" data-id="1">   
            <img src="../images/s8.jpg" alt="Flower 1">  
            <h2>乘风破浪</h2>  
            <p>描述：但愿你在人生每个年龄段，都有乘风破浪的勇气，活出最美的自己</p>  
            <button class="remove-button" data-id="1">移除收藏</button>   
        </article>      
        <article class="collection-item" data-id="2">   
            <img src="../images/s5.jpg" alt="Flower 2">  
            <h2>亲爱的你</h2>  
            <p>描述：我喜欢的样子你都有</p>  
            <button class="remove-button" data-id="2">移除收藏</button>   
        </article>
        <article class="collection-item" data-id="3">   
            <img src="../images/s1.jpg" alt="Flower 3">  
            <h2>星河璀璨</h2>  
            <p>描述：你如璀璨的星河，于苍穹之中，焕发光芒，闪耀着我的人生</p>  
            <button class="remove-button" data-id="3">移除收藏</button>   
        </article>
        <article class="collection-item" data-id="4">   
            <img src="../images/s2.jpg" alt="Flower 4">  
            <h2>金色暖阳</h2>  
            <p>描述：心有暖阳，满目芬芳</p>  
            <button class="remove-button" data-id="4">移除收藏</button>  
        </article>
        <article class="collection-item" data-id="5">   
            <img src="../images/s9.jpg" alt="Flower 5">  
            <h2>绽放</h2>  
            <p>描述：元气满满，永远向着太阳</p>  
            <button class="remove-button" data-id="5">移除收藏</button>  
        </article>
        </section>
        <p class="empty-message">你的收藏夹为空，请去添加收藏的商品。</p>    
    </main>  
</body>
</html>